<template>
	<view class="form-area-wrapper">
		<uni-popup type="bottom" ref="popup">
			<view class="popup-wrapper">
				<view class="popup-header">
					<view @click="close">取消</view>
					<view class="save" @click="save">确定</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
					<picker-view-column v-if="!property.data.form.provinceHidden">
						<view class="item" v-for="(item,index) in Province" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="!property.data.form.cityHidden">
						<view class="item" v-for="(item,index) in City" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="!property.data.form.countyHidden">
						<view class="item" v-for="(item,index) in County" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ComposeMixins from "../../static/js/compose-mixins.js";
	import action from "../../static/js/action.js";
	import uniPopup from "../../components/uni-popup/uni-popup.vue";
	import CssUtil from "../../static/js/css-utils.js";
	import {
		getAreaList
	} from "../../static/js/api/components.js";
	export default {
		name: "cz-form-area",
		mixins: [ComposeMixins],
		components: {
			uniPopup
		},
		data() {
			return {
				provinceValue: '',
				cityValue: '',
				countyValue: '',
				areaValue: null,
				areaArr: [],
				text: '',
				indicatorStyle: `height: 50px;`,
				Province: [],
				County: [],
				City: [],
			}
		},
		computed: {
			titleStyle() {
				let fontSize = this.property.style.fontSize;
				let fontFamily = this.property.style.fontFamily;
				let style = {
					'font-size': `${fontSize.size}rpx`,
					'line-height': `${fontSize.line}rpx`,
					'letter-spacing': `${fontSize.letter}rpx`,
					'color': fontFamily.color,
					'font-family': fontFamily.family,
					'font-weight': fontFamily.weight,
				}
				return CssUtil.toString(style);
			},
		},
		mounted() {
			this.getProvinceData();
			console.log(this.property);
		},
		watch: {
			'property.data.form.provinceValue': {
				immediate: true,
				handler: function(val) {
					this.provinceValue = val
				}
			},
			'property.data.form.cityValue': {
				immediate: true,
				handler: function(val) {
					this.cityValue = val
				}
			},
			'property.data.form.countyValue': {
				immediate: true,
				handler: function(val) {
					this.countyValue = val
				}
			},
		},
		methods: {
			// 数据回显
			handleEcho(codeArr) {
				if(codeArr.length>0){
					getAreaList({
						type: 0
					}).then(res => {
						this.Province = res
						this.Province.forEach(item => {
							if(item.code==this.provinceValue){
								this.areaArr.push(item.name)
								this.areaValue = this.areaArr.toString()
							}
						})
						if(codeArr.length>1){
							getAreaList({
								type: 1,
								code: this.provinceValue
							}).then(res => {
								this.Province = res
								this.Province.forEach(item => {
									if(item.code==this.cityValue){
										this.areaArr.push(item.name)
										this.areaValue = this.areaArr.toString()
									}
								})
							})
							if(codeArr.length>2){
								getAreaList({
									type: 2,
									code: this.cityValue
								}).then(res => {
									this.Province = res
									this.Province.forEach(item => {
										if(item.code==this.countyValue){
											this.areaArr.push(item.name)
											this.areaValue = this.areaArr.toString()
										}
									})
								})
							}
						}
					})
				}
			},
			// 获取省列表数据
			getProvinceData() {
				getAreaList({
					type: 0
				}).then(res => {
					this.Province = res
				})
			},
			// 下拉滑动时触发
			bindChange(e) {
				let indexs = e.detail.value
				let arr = []
				this.areaArr = []
				if (indexs.length > 0) {
					getAreaList({
						type: 0
					}).then(res => {
						this.Province = res
						this.provinceValue = this.Province[indexs[0]].code
						this.areaArr.push(this.Province[indexs[0]].name)
						
						getAreaList({
							type: 1,
							code: this.provinceValue
						}).then(res => {
							this.City = res
							console.log('174',indexs)
							if(indexs.length>1){
								this.cityValue = this.City[indexs[1]].code
								this.areaArr.push(this.City[indexs[1]].name)
							}else{
								this.cityValue = this.City[0].code
								this.areaArr.push(this.City[0].name)
							}
							getAreaList({
								type: 2,
								code: this.cityValue
							}).then(res => {
								this.County = res
								if (indexs.length > 2) {
									this.countyValue = this.County[indexs[2]].code
									this.areaArr.push(this.County[indexs[2]].name)
								}
							})
						})
					})
				}
			},
			// 下拉数据选择确认按钮
			save() {
				this.$refs.popup.close()
				this.areaValue = this.areaArr.toString()
				// console.log(this.areaValue)
				let propertyVal = {
					value:this.areaValue,
					id:this.property.data.form.id
				}
				this.$emit('change',propertyVal)
			},
			open() {
				this.$refs.popup.open()
				if (this.provinceValue == '') {
					let val = {
						detail: {
							value: [0, 0, 0]
						}
					}
					this.bindChange(val)
				}

			},
			close() {
				this.$refs.popup.close()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.form-area-wrapper {
		width: 100%;
		margin-top: 20rpx;

		.title {
			color: #666;
			margin: 10rpx 0;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: flex;

			.required {
				color: red;
			}
		}

		.uni-input {
			width: calc(100% - 64rpx);
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			border: 1px solid $uni-border-color;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #222;
			background-color: #fff;
		}

		.input {
			height: 80rpx;
			border-radius: 8rpx;
			padding: 0 30rpx;
			border: 1px solid #c0c4cc;
			font-size: 28rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.placeholder {
			color: $uni-text-color-placeholder;
		}

		.popup-wrapper {
			z-index: 9999;
			background-color: #fff;

			.popup-header {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #efefef;
				display: flex;
				justify-content: space-between;
				width: 100%;
				background-color: #fff;
				z-index: 999;

				view {
					width: 200rpx;
					height: 90rpx;
					text-align: center;
				}

				.save {
					color: $uni-color-success;
				}
			}

			.picker-view {
				width: 750rpx;
				height: 600rpx;
				background-color: #fff;
				z-index: 999;

				.item {
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	}
</style>
